<template>
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
		</view>
		<view class="clincontent borderbox bgfff">
			<view class="title pos-rel">
				<view class="fz48 fwbold titletext">
					{{broadcast.title}}
				</view>
				<view class="justify-between align-center mt30">
					<view class="flex-row align-center fz24" style="color: #7E8987;">
						已帮助:{{ broadcast.hits }}人
					</view>
					<view class="flex-row align-center fz24" style="color: #7E8987;">
						{{broadcast.updateTime}}
					</view>
				</view>
			</view>
			<consulting></consulting>
			<view class="newscontent ofhide" v-html="broadcast.content">
			</view>

			<view class="reference_material">
				参考资料： {{ ydzsetobj.referenceMaterial }}
			</view>
			<view class="disclaimers">
				<span class="disclaimers_font">免责声明：</span>
				{{ ydzsetobj.disclaimers }}
			</view>
		</view>
		<view class="broadcastBox borderbox bgfff">
			<view class="head flex-row">
				<view class="headtetx ischoose" style="">
					<image src="@/static/images/broadcast/zb_icon.png" style="width: 52rpx;height: 38rpx;" mode="">
					</image>
					<view style="margin-left: 8rpx;">
						相关直播
					</view>
					<view class="linebox">
					</view>
				</view>
			</view>
			<view class="listbox" v-for="(item,index) in broadcastList" :key="index" @click="toBroadcast(item.id)">
				<view class="newscard">
					<view class="title lineclamp2">
						{{item.title}}
					</view>
					<view class="live_content" v-html="tackleContent(item.content)">
					</view>
					<view class="flex-row justify-between align-center " style="margin: 12rpx 0 32rpx 0;">
						<view class="" style="color: #7E8987; font-size: 24rpx;">
							推荐指数:666
						</view>
						<view class="" style="color: #7E8987; font-size: 24rpx;">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<community></community>
		<typenews :type="2" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="znNewsList">
		</typenews>
		<AdvCom :type="2"></AdvCom>
		<typenews :type="1" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="zsNewsList">
		</typenews>
		<aboutdrug :drugList="drugList"></aboutdrug>
		<AdvCom :type="4"></AdvCom>
		<aboutclinical :clinicalList="clinicalList"></aboutclinical>
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import community from '../../components/generalcom/community.vue'
	import typenews from '../../components/generalcom/typenews.vue';
	import aboutdrug from '../../components/generalcom/aboutdrug.vue'
	import aboutclinical from '../../components/generalcom/aboutclinical.vue'
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import {
		getInfo
	} from '@/api/login'
	import {
		getBroadcastById,
		selectBroadcastList,
		getdisNewsList,
		getDrugList,
		getClinicalList,
		getotherlist,
		getydzSet,
	} from '@/api/api.js';

	export default {
		components: {
			FixedFoot,
			NavHeader,
			AdvCom,
			consulting,
			community,
			typenews,
			aboutdrug,
			aboutclinical,
			HotnewsCom
		},
		data() {
			return {
				broadcast: {},
				broadcastList: {},
				zsNewsList: [],
				znNewsList: [],
				drugList: [],
				clinicalList: [],
				diseaseList: [],
				userDocument: {},
				user: {},
				ydzsetobj: {}
			}
		},
		onLoad(option) {
			this.getuser()
			this.getset()
			this.getBroadcastById(option.id)
			this.selectBroadcastList()
		},
		methods: {

			getuser() {
				getInfo().then(res => {
					this.user = res.user
					this.userDocument = res.userDocument
					let dis = {
						"diseaseId": res.userDocument.diseaseId
					}
					this.diseaseList.push(dis);
					this.getDrugList()

					this.selectClinicalList(this.diseaseList)
					this.zsSelectNewsList()
					this.znSelectNewsList()
				})
			},
			getset() {
				getydzSet().then(res => {
					this.ydzsetobj = res.data
				})
			},
			getBroadcastById(id) {
				getBroadcastById(id).then(res => {
					if (200 == res.code) {
						this.broadcast = res.data
					}
				})
			},

			selectBroadcastList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"orderByColumn": "create_time",
					"isAsc": "desc",
				}
				selectBroadcastList(param).then(response => {
					this.broadcastList = response.rows
				})
			},

			toBroadcast(id) {
				uni.navigateTo({
					url: '/pages/broadcast/index?id=' + id,
				});
			},
			zsSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "02",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.zsNewsList = response.rows
				})

			},
			znSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "01",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.znNewsList = response.rows
				})
			},
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}

				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
					}
				})
			},
			selectClinicalList(diseaseList) {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": diseaseList
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
			tackleContent(content) {
				content = content.replace(/<[^>]+>/g, "");
				if (content.length > 30) {
					content = content.substring(0, 30) + '...<a style="color:#00977C;">[ 详情 ]</a>'
				}
				return content;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.clincontent {
			padding: 24rpx 24rpx 48rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.title {
				padding-bottom: 24rpx;

				.beforelog {
					text-align: center;
					line-height: 48rpx;
					width: 76rpx;
					height: 65rpx;
				}

				.titletext {
					color: #303b39;
					line-height: 64rpx;
					text-align: justified;
					// text-indent: 90rpx;
				}
			}

			.newscontent {
				margin-top: 20rpx;
				color: #293347;
				font-size: 36rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 36rpx;

				::v-deep h2 {
					color: #00977C;
					font-weight: bold;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 36rpx;
					font-size: 40rpx;
				}

				::v-deep h3 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 20rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep h4 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 18rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep p {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep a {
					font-size: 18rpx;
					color: #003399;
				}
			}

			.reference_material {
				font-weight: 400;
				font-size: 28rpx;
				color: #303B39;
				line-height: 56rpx;
				margin-top: 32rpx;
				word-break: break-all;
			}

			.disclaimers {
				background: #F0F6F5;
				border-radius: 8rpx;
				padding: 16rpx;
				margin-top: 32rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #576260;
				line-height: 56rpx;

				.disclaimers_font {
					color: #00D9B2;
				}
			}
		}

		.head {
			height: 110rpx;
			padding: 10rpx 32rpx 0;
			border-bottom: 1px solid #D7DDDC;

			.headtetx {
				font-size: 40rpx;
				display: flex;
				align-items: center;
				height: 100rpx;
				margin-right: 40rpx;
				position: relative;

				.linebox {
					position: absolute;
					bottom: 0;
					width: 220rpx;
					height: 10rpx;
					background: #00D9B2;
					border-radius: 50rpx;
				}
			}

			.ischoose {
				color: #303B39;
				font-weight: 800;
			}

			.nochoose {
				color: #576260;
				font-weight: 400;
			}
		}

		.listbox {
			padding: 0 24rpx;

			.newscard {
				border-bottom: 1rpx dashed #D7DDDC;
				margin-top: 24rpx;

				.title {
					font-size: 38rpx;
					color: #303B39;
					line-height: 56rpx;
					text-align: left;
				}

				.content {
					font-weight: 500;
					font-size: 32rpx;
					color: #576260;
					line-height: 56rpx;
				}

				.live_content {
					font-size: 32rpx;
					color: #576260;
					line-height: 56rpx;
				}
			}
		}

		.broadcastBox {
			padding: 24rpx 0;
			border-radius: 32rpx;
			margin-top: 16rpx;
		}
	}
</style>